<script setup>
import * as Cesium from 'cesium'
import MapSwitch from '@/views/Map/components/MapSwitch.vue'
import MapDimX from '@/views/Map/components/MapDimX.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import { addHighlightHandler } from '@/utils/highlighted.js' //
import { addJsonData } from '@/utils/AddGeoJSON.js'
import { useMapStore } from '@/stores/mapStore.js'

const viewerRef = ref(null)

const mapStore = useMapStore()



onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    terrain: Cesium.Terrain.fromWorldTerrain(),
    // baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    //   Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE)
    // )
  })
  viewer.cesiumWidget.creditContainer.style.display = "none"

  viewerRef.value = viewer
  // 存储到Store
  mapStore.setViewer(viewer)

  // 初始化天气效果
  mapStore.initWeatherEffects()


  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(102.81, 37.18, 9000),
    duration: 1,
    orientation: {
      pitch: Cesium.Math.toRadians(-85),
      heading: Cesium.Math.toRadians(0)
    }
  })



  viewer.scene.globe.depthTestAgainstTerrain = true
  addJsonData(viewer)
  addHighlightHandler(viewer);
})


onUnmounted(() => {
  viewerRef.value.destroy() //销毁viewer
  mapStore.setViewer(null)
  mapStore.cleanup()
  mapStore.setViewer(null)
})
</script>

<template>
  <MapSwitch :viewer="viewerRef" />
  <MapDimX :viewer="viewerRef" />
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer {
  position: relative;
  z-index: 0;
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
